import React, { Component } from 'react'
import "./TodoList.css"
export default class TodoList extends Component {
 
    state={
        list:[{task:'学习js',status:"done",id:0},
        {task:'学习vue',status:"done",id:1},
        {task:'学习react',status:"notdo",id:2},
        {task:'学习vue3',status:"notdo",id:3}],
        btns:[
            {text:"全部",id:0,flag:"all"},
            {text:"已完成",id:1,flag:"done"},
            {text:"未完成",id:2,flag:"notdo"}
        ],
        currtbtn:'all'
    }
    addTask=()=>{
        let {list}=this.state
        console.log(this.textinput.value)
        let val=this.textinput.value
        list.unshift({
            task:val,status:"notdo",id:list.length
        })
        this.setState({
            list
        })

    }
    changeStatus=(id,status)=>{
        let {list}=this.state
        for (const m of list) {
            if(m.id==id){
                m.status=m.status=='done'?"notdo":"done"
            }      
        }
        this.setState({list})

        }
    clickbtn=(currtbtn)=>{
        this.setState({currtbtn})
      
    }

    get showList(){
        let {list,currtbtn}=this.state
        console.log('currtbtn',currtbtn);
        switch (currtbtn) {
            case "done":
                return list.filter(m=>m.status=="done")
                case "notdo":
                    return list.filter(m=>m.status=="notdo")
        
            default:
             return list
        }

    }


    render() {
        let {list,btns,currtbtn}=this.state
    return (
        <>
            <div><input type="text" placeholder='请输入任务' ref={(input)=>this.textinput=input}/>
                    <button onClick={this.addTask}>添加任务</button>
            
            </div>   
                <ul>
                    {this.showList.map((item)=>{
                    
                        return <li key={item.id} className={item.status} onClick={()=>this.changeStatus(item.id,item.status)}>{item.task}</li>

                    })}
                    
                    
                    </ul>

                {btns.map((item)=>{
                    return  <button key={item.id} className={item.flag==currtbtn?'active':''} onClick={()=>this.clickbtn(item.flag)}>{item.text}</button>
                })}       


        </>
    )
  }
}
